<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>WebRTC capture video and audio</title>
</head>
<body>

<!--
有时候在微信网页端插入<Video>标签的时候,不希望用户来拖动进度条的话,可以直接使用 playsinline属性,webkit-playsinline属性
-->
<video autoplay playsinline id="player"></video>

<script>
  const videoplay = document.querySelector('video#player');

  if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
    console.log('getUserMedia is not supported!');
  }else {
    const MediaStreamConstrains = {
      video: true,
      audio: true
    };

    navigator.mediaDevices.getUserMedia(MediaStreamConstrains)
      .then(gotMediaStream)
      .catch(handleError);
  }

  function gotMediaStream(stream){
    videoplay.srcObject = stream;
  }

  function handleError(error){
    console.error('getUserMedia error:', error);
  }
</script>
</body>
</html>
